/* form elements*/
.col-form-label { margin-bottom: 0 !important }
.form-control::-webkit-input-placeholder {color: #999}
.form-control:-ms-input-placeholder {color: #999}
.form-control:focus {outline: 0}
.form-control.flat { border-radius: 0; border: none }
.form-control-line {background-color: transparent;box-shadow: none !important;border-radius: 0 0 0 0;border: none;border-bottom: 1px solid #ccc;padding-left: 0;padding-right: 0}
.form-control-line:focus { border-bottom: 1px solid #007aff }
.form-group-alt {
  padding: 6px 10px 5px;border: 1px solid #cfdadd;position: relative;border-radius: 2px;
  > label {position: relative;z-index: 1;color: #111}
  > .form-control {margin-top: -6px;height: 30px;min-height: 30px;border: none !important;padding: 0;background-color: transparent !important; box-shadow: none; border-radius: 0;z-index: 1;position: relative}
  > .form-control + span:after {content: '';background-color: transparent;top: 0;left: 0;right: 0;bottom: 0;position: absolute;z-index: 0}
  > .form-control.disabled + span:after, .form-group-alt > .form-control:disabled + span:after {background-color: #f1f1f1}
  > .form-control:focus + span:after {background-color: rgba(0, 0, 0, .02)}
  > select {margin-left: -4px}
  > textarea {margin-top: -4px !important}
  &:hover {background-color: #fcfcfc}
  > .input-group {margin-top: -6px}
  > .input-group .form-control {margin-top: 0;height: 25px;min-height: 25px;border: none !important;padding: 0;background-color: transparent;border-radius: 0;z-index: 1;position: relative}
  > .input-group .input-group-addon {border: none}
}
.form-group-alt-attached {
  border-right: 1px solid #cfdadd;
  > .row {margin: 0}
  > .row > div[class^="col-"] {padding: 0}
  > .row > div[class^="col-"] > .form-group-alt {margin-bottom: 0;border-radius: 0;border-bottom: none;border-right: none}
  > .row:last-child > div[class^="col-"] > .form-group-alt { border-bottom: 1px solid #cfdadd }
}
.md-form-group { padding: 18px 0 20px; position: relative }
.md-form-group.md-float-label .md-input ~ label { top: 20px; font-size: 1em }
.md-form-group.md-float-label .md-input:focus ~ label {color: #007aff;opacity: 1;top: 0 !important;font-size: 0.85em !important;}
.md-input {
  background: 0 0;
  position: relative;
  z-index: 5;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(160, 160, 160, 0.5);
  width: 100%;
  height: 34px;
  padding: 2px;
  color: inherit;
  ~ label {transition: all .2s;position: absolute;z-index: 0;opacity: .5;left: 0;display: inline-block;top: 0;font-size: .85em}
  &.has-value ~ label {top: 0 !important;font-size: .85em !important}
  &:focus {border-color: #007aff;border-bottom-width: 2px;padding-bottom: 1px;outline: 0}
  &[disabled] {opacity: .5;cursor: default}
}
.md-switch {
  cursor: pointer;
  margin: 0;
  display: inline-block;
  i {height: 1.125rem;display: inline-block;margin-right: 2.75rem;position: relative;line-height: 1;vertical-align: middle}
  i:before,
  i:after {content: '';position: absolute;transition: all .2s}
  i:before {width: 2.125rem;top: 1px;height: .875rem;border-radius: .5rem;background-color: #9e9e9e;}
  i:after {margin: 0;top: -.125rem;height: 1.25rem;width: 1.25rem;border-radius: 50%;background-color: #fff;box-shadow: 0 .125rem .3125rem 0 rgba(0, 0, 0, .26)}
  input {
    display: none;
    &:checked + i:after {background: inherit;left: 1rem}
    &:checked + i:before {background: inherit;opacity: .5}
    &[disabled] + i:before {background-color: rgba(0, 0, 0, .12)}
    &[disabled] + i:after {background-color: #bdbdbd}
  }
}
.md-check {
  display: inline-block;
  position: relative;
  text-align: left;
  line-height: 1;
  margin: 0;
  > i {
    display: inline-block;
    vertical-align: text-top;
    position: relative;
    overflow: hidden;
    border: 1px solid #9e9e9e;
    border-radius: 3px;
    height: 1.5rem;
    width: 1.5rem;
    color: #fff;
    &:before {
      background-color: #fff;
      position: absolute;
      height: 100%;
      width: 100%;
      content: '';
    }
  }
  input {
    display: none;
    &:checked + i {border: 0}
    &[disabled] + i {opacity: .5}
    &[type=checkbox]:checked + i:before {
      background-color: inherit;
      transform: rotate(45deg) translate(-110%, -25%);
      border-radius: .125rem;
      border: .125rem solid;
      border-left: 0;
      border-top: 0;
      content: '';
      height: .8rem;
      width: .5rem;
      left: 50%;
      top: 50%;
    }
    &[type=radio] + i {
      border-radius: 50%
    }
    &[type=radio]:checked + i:before {
      background-color: #fff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      height: .375rem;
      width: .375rem;
      left: 50%;
      top: 50%;
    }
  }
}
.ui-switch {
  background-color: #6cc788;
  vertical-align: middle;
  border-radius: 2rem;
  display: inline-block;
  position: relative;
  height: 1.5rem;
  width: 2.5rem;
  min-width: 2.5rem;
  margin: 0;
  > i {
    &:before,
    &:after {
      background-color: #fff;
      position: absolute;content: ''
    }
    &:before {
      transition: all .2s;
      border: 1px solid #f0f0f0;
      border-radius: 2rem;
      bottom: -1px;
      right: -1px;
      left: -1px;
      top: -1px;
    }
    &:after {
      border-radius: 50%;
      width: 1.375rem;
      top: 1px;
      bottom: 1px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, .25);
      transition: margin .3s;
    }
  }
  input {
    display: none;
    &:checked + i:after {margin-left: 1.0625rem}
    &:checked + i:before {
      border-radius: .3125rem;
      border-width: 0;
      bottom: 50%;
      right: .3125rem;
      left: 50%;
      top: 50%
    }
  }
}
.ui-switch-sm {
  height: 1.125rem; width: 2rem; min-width: 2rem;
  > i:after { width: 1rem }
  input:checked + i:after { margin-left: .9375rem }
}
.ui-switch-lg {
  height: 1.875rem; width: 3.125rem; min-width: 3.125rem;
  > i:after { width: 1.75rem }
  input:checked + i:after { margin-left: 1.3125rem}
}
.ui-check {
  input {
    display: none;
    &:checked + i {border: 1px solid currentColor}
    &:disabled + i { opacity: .3 }
    + i {
      display: inline-block;
      vertical-align: text-top;
      border-radius: .1875rem;
      border: .0625rem solid #bbb;
      transition: all .2s;
      position: relative;
      height: 1.5rem;
      width: 1.5rem;
      cursor: pointer;
      &:hover { border-color: currentColor }
      &:after { transition: background .2s;
        position: absolute;
        content: '';
        left: 50%;
        top: 50%
      }
    }
    &[type=checkbox] {
      + i:after {
        border: solid transparent;
        border-radius: .125rem;
        border-width: 0 .125rem .125rem 0;
        transform: rotate(45deg) translate(-110%, -25%);
        height: .8rem;
        width: .5rem
      }
      &:checked + i:after { border-color: currentColor }
    }
    &[type=radio] {
      + i { border-radius: 25rem }
      &:checked + i:after {
        transform: translate(-50%, -50%);
        background: currentColor;
        border-radius: 50%;
        padding: .35rem
      }
    }
  }
}
/* input with icons */
.input {
  border-bottom: 1px solid #d6d9db;
  background: #f1f2f3;
  position: relative;
  padding: 1rem;
  z-index: 11;
  > i,
  > i:before,
  > i:after {
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
  }
  > i { transition: opacity .3s ease; opacity: .5; right: 2.8rem }
  &.loading > i:before,
  &.loading > i:after {
    animation: spin .6s linear infinite;
    border: .18em solid transparent;
    border-top-color: #767676;
    border-radius: 50%;
    margin-top: -.625rem;
    height: 1.25rem;
    width: 1.25rem;
    content: ''
  }
  &.loading > i:before { border-color: rgba(0, 0, 0, .2) }
  input {
    border: 1px solid #d9d9d9;
    padding-right: 2.3rem;
    &:focus {border-color: #5cb3fd}
    &:focus + i {opacity: 1}
  }
}
.input-holder {
  position: relative;
  padding-right: .75rem;
  padding-left: 2.75rem;
  &.append { padding-right: 2.75rem }
  > i {
    transform: translateY(-50%);
    position: absolute;
    font-size: 1.25rem;
    color: #d8d8d8;
    left: .75rem;
    top: 50%;
  }
  input {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0;
    border: none;
    height: 43px;
    :focus { outline: 0 }
  }
  input + i { right: 1rem; left: auto }
  textarea { padding: 10px 5px; min-height: 150px }
}
.btn.loading {
  transition: all 0s linear, opacity .1s ease;
  text-shadow: none;
  color: transparent;
  pointer-events: auto;
  cursor: default;
  opacity: 1;
  &:before,
  &:after {
    margin: -.64285714em 0 0 -.64285714em;
    border-radius: 50rem;
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    left: 50%;
    top: 50%;
  }
  &:before {
    border: .2em solid rgba(0, 0, 0, .15);
  }
  &:after {
    animation: spin .6s linear infinite;
    box-shadow: 0 0 0 1px transparent;
    border: .2em solid transparent;
    border-top-color: #FFF;
  }
}
